<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="launchpad-dash"> <h6 class="mb-5 launchpad-dash-title pl-4 ml-2">My Cluster responsibilities (9 roles)</h6> <div class="d-flex"> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-red"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-yellow"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-orng"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue-light"> SICS </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-light"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p>Star Performers</p> <p class="small">16 Groups</p> </div> </div> </div> <h6 class="mb-5 launchpad-dash-title"><i class="fas fa-star text-warning mr-2"></i> My Favourite Cluster (9 Clusters)</h6> <div class="d-flex"> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-red"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-yellow"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-orng"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue-light"> SICS </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-light"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon see-more-item"> See<br>More <i class="fas fa-angle-right pl-3 pt-3"></i> </div> </div> </div> </div> <h6 class="mb-5 launchpad-dash-title pl-4 ml-2">My Custom - Classified Clusters</h6> <div class="d-flex"> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-red"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-yellow"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-orng"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue-light"> SICS </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-light"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon see-more-item"> See<br>More <i class="fas fa-angle-right pl-3 pt-3"></i> </div> </div> </div> </div> <h6 class="mb-5 launchpad-dash-title pl-4 ml-2">My Recently viewed Clusters</h6> <div class="d-flex"> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-red"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-yellow"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-orng"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-blue-light"> SICS </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-light"> GM </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> <p class="small">16 Groups</p> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon see-more-item"> See<br>More <i class="fas fa-angle-right pl-3 pt-3"></i> </div> </div> </div> </div> <h6 class="mb-5 launchpad-dash-title pl-4 ml-2">Pre - Classified Group Clusters</h6> <div class="d-flex"> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> </div> <h6 class="mb-5 launchpad-dash-title pl-4 ml-2">Pre - Classified Member Clusters</h6> <div class="d-flex"> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> <div class="launchpad-dash-item"> <div class="launchpad-dash-item-header"> <div class="launchpad-dash-pin"><i class="fas fa-thumbtack"></i></div> <div class="launchpad-dash-item-header-icon launchpad-dash-bg-gray-folder"> <i class="far fa-folder h2 m-0"></i> </div> </div> <div class="launchpad-dash-item-body"> <h5>Coordinator</h5> </div> </div> </div> </div>

.launchpad-dash { background: #363a54; padding: 20px; } .launchpad-dash-item { width: 130px; text-align: center; margin-bottom: 50px; } .launchpad-dash-item-header-icon { width: 70px; height: 70px; background: #707070; border-radius: 7px; box-shadow: 0 0.5px 5px 0 rgba(0, 0, 0, 0.16); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; } .launchpad-dash-item-header { width: 70px; margin: auto; margin-bottom: 8px; position: relative; } .launchpad-dash-pin { width: 24px; height: 24px; padding: 2px; border-radius: 5px; background-color: #ffbf00; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; position: absolute; right: -12px; top: -12px; } .launchpad-dash-item-body h5 { font-size: 14px; font-weight: 500; color: #fff; margin: 0px; } .launchpad-dash-item-body p { color: #ccc; font-size: 10px; margin: 1px 0 0 0; } .launchpad-dash-item-body .small { color: #fff; font-size: 10px; } .launchpad-dash-bg-blue{ background: #654ee2; } .launchpad-dash-bg-red{ background: #ed3936; } .launchpad-dash-bg-yellow{ background: #f7b843; } .launchpad-dash-bg-orng{ background: #db7254; } .launchpad-dash-bg-blue-light{ background: #54cded; } .launchpad-dash-bg-gray-light{ background: #726e7b; } .launchpad-dash-bg-gray-folder{ background: #575c6f; } .launchpad-dash-title{ font-size: 16px; font-weight: bold; color: #e5e5e5; } .see-more-item { background: #575c6f; font-size: 13px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.23; letter-spacing: 0.16px; text-align: left; color: #fff; }